<template>
  <div class="helpTemplate headerTopMain">
    <div class="helpCenterBox scrollBar">
      <div class="helpCenterTitle">
        <ul class="helpTitleUl clearFiex">
          <li class="helpTitleItem floatLeft indexJust" :class="{on:currentId==helpTitleItem.id}" v-for="(helpTitleItem,helpTitleIndex) in helpCenterData" @click="helpTitleEvent(helpTitleItem.id,helpTitleItem.name,helpTitleItem.subItem)" v-if="helpTitleItem.id!='5'">
            <a href="javascript:void(0);">
              <i :class="{questionIcon:helpTitleItem.id=='1',helpWithdrawIcon:helpTitleItem.id=='2',newGuidIcon:helpTitleItem.id=='3',helpTopupIcon:helpTitleItem.id=='4',on:currentId==helpTitleItem.id}"></i>
              <p>{{helpTitleItem.name}}</p>
            </a>
          </li>
          <li class="helpTitleItem floatLeft indexJust">
            <router-link :to="{name:'colorRules',query:{code:'001'}}">
              <i class="rulesIcon"></i>
              <p>玩法介绍</p>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="bannerTitle">{{currentTitle}}</div>
      <div class="helpCenterInfoBox">
        <ul class="helpCenterInfo">
          <li class="helpInfoItem" v-for="(helpInfoItem,helpInfoIndex) in helpCenterSubData">
            <div class="helpInfoTitle" @click="helpInfoTitleEvent(helpInfoIndex)">
              <p>{{helpInfoItem.title}}</p>
              <!--<p>请联系黑桃A客服（4008238238823），提供账号绑定的手机号，待何时身份后给您回电。</p>-->
            </div>
            <div class="helpItemContent" v-html="helpInfoItem.content"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import './helpCenter.scss';
  
  export default {
    data() {
      return {
        currentId:'1',
        currentTitle:'常见问题',
        helpCenterData: [],
        helpCenterSubData: [],
      }
    },
    mounted() {
      this.init();
    },
    activated() {
      this.init();
      this.initData();
    },
    methods: {
      init() {
        setTimeout(() => {
          let height = $(window).height();
          $(".helpTemplate").height(height - 62- 68 - $(".breadcrumb").outerHeight());
        }, 600);
      },
      initData() {
        let that = this;
        that._Util.post(that, that._Api.POST_GET_HELP_LIST_DATA, {}, (data) => {
          that.helpCenterData = data;
          that.helpTitleEvent(that.helpCenterData[0].id,that.helpCenterData[0].name,that.helpCenterData[0].subItem);
        });
      },
      //标题点击事件
      helpTitleEvent(id,name,data){
      this.currentId = id;
      this.currentTitle = name;
      this.helpCenterSubData = data;
      },
      //内容QA点击事件
      helpInfoTitleEvent(index){
        if($(".helpInfoItem").eq(index).hasClass("on")){
          $(".helpInfoItem").eq(index).removeClass("on");
        }else{
          $(".helpInfoItem").removeClass("on");
          $(".helpInfoItem").eq(index).addClass("on");
        }
        $(".helpItemContent").stop().slideUp(300);
        $(".helpItemContent").eq(index).stop().slideToggle(300);
      },
    }
  }
</script>
